<template>
	<view class="content"
		:style="{'paddingTop': paddingTop}"
	>
		<swiper class="swiper-box"
			:current="current"
			:autoplay="true"
			:style="{'height': bgHeight + 'px'}"
			circular
			@change="change"
		>
			<swiper-item v-for="(banner, index) in banners" :key="index">
				<image style="width: 100%; height: 100%;" :src="banner.ImageFile"></image>
			</swiper-item>
		</swiper>
		<view class="slogo">
			<!-- <image class="bg" :src="$store.state.images.home_1" :style="{'height': bgHeight + 'px'}"></image> -->
			<image class="bg" :src="$store.state.images.home_1" mode="widthFix"></image>
			<view class="buttons">
				<view class="button" @click="xmb">
					<text>星梦保</text>
				</view>
				<!-- <view class="button" @click="changeTabIndex(1)">
					<text>门店查询</text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		onLoad() {
		},
		data() {
			return {
				current: 0,
			}
		},
		computed: {
			...mapState(['screenWidth','navBarHeight','statusBarHeight']),
			bgHeight() {
				return this.screenWidth * 327 / 414;
			},
			paddingTop() {
				// return (this.statusBarHeight) + "px";
				return '0px';
			},
			banners() {
				return this.$store.state.banners;
			}
		},
		methods: {
			changeTabIndex(tabIndex) {
				this.$store.commit('changeTabIndex', tabIndex);
			},
			xmb() {
				uni.navigateTo({
					url:'/pages/home/xmb',
				})
			},
			change(e) {
				this.current = e.detail.current;
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		/* height: 100vh; */
		box-sizing: border-box;
		/* padding-bottom: 100rpx; */
	}
	.bg {
		width: 100vw;
		height: auto;
	}
	.slogo {
		position: relative;
		/* margin-top: -50rpx; */
		/* flex: 1; */
		margin-bottom: 100rpx;
	}
	.swiper-box {
		z-index: 100;
		position: relative;
		/* margin: -50rpx 40rpx 0 40rpx; */
		/* margin-top: -50rpx; */
		/* width: calc(100vw - 80rpx); */
		width: 100vw;
		align-self: center;
		/* margin-bottom: 130rpx; */
		/* background-color: red; */
		height: 500rpx;
		min-height: 500rpx;
		border-radius: 25rpx;
		overflow: hidden;
	}
	.buttons {
		position: absolute;
		bottom: 150rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 100vw;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-evenly;
	}
	.button {
		height: 70rpx;
		width: 260rpx;
		background-color: #50c0f9;
		border-radius: 100rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: "yshst" !important;
	}
</style>
